<template>
  <div class="send-settings">
    <p>填写并核对订单信息</p>
    <div class="user-info">
      <div class="user-content">
        <div class="top-header">
          <h3>收货人信息</h3>
          <!-- 点击触发打开弹窗 -->
          <span class="add-address" @click="openAddressDialog">新增收货地址</span>
        </div>

        <!-- 默认地址展示 -->
        <div class="user-name" v-if="defaultAddress">
          <div class="name">
            {{ defaultAddress.receiver }}
            <span class="edit-btn" @click.stop="openAddressDialog(defaultAddress.id)">编辑</span>
          </div>
          <div class="address">
            {{ defaultAddress.region }}{{ defaultAddress.detailAddress }}
            {{ defaultAddress.phone }}
            <span class="default-tag">默认</span>
          </div>
        </div>

        <!-- 无地址时显示提示 -->
        <div class="user-name" v-else>
          <div class="no-address">暂无收货地址，请添加</div>
        </div>

        <!-- 更多地址切换按钮（有多个地址时显示） -->
        <div class="more-address" @click="toggleShowMoreAddresses" v-if="addresses.length > 1">
          <span>{{ showMoreAddresses ? '收起地址' : '更多地址' }}</span>
          <i class="iconfont icon-gengduo"></i>
        </div>

        <!-- 更多地址列表 - 使用计算属性filteredAddresses替代直接v-if过滤 -->
        <div class="additional-addresses" v-if="showMoreAddresses && addresses.length > 1">
          <div class="user-name"
               v-for="addr in filteredAddresses"
               :key="addr.id"
               @click="setAsDefaultAddress(addr.id)">
            <div class="name">
              {{ addr.receiver }}
              <span class="edit-btn" @click.stop="openAddressDialog(addr.id)">编辑</span>
            </div>
            <div class="address">
              {{ addr.region }}{{ addr.detailAddress }} {{ addr.phone }}
            </div>
          </div>
        </div>
      </div>

      <div class="pay-ways">
        <h3>支付方式</h3>
        <div class="pay-content">
          <span>在线支付</span>
          <span>货到付款</span>
          <span>更多</span>
        </div>
      </div>
    </div>

    <!-- 引入地址弹窗组件 -->
    <SetAddress
      :visible="isAddressDialogVisible"
      :address-id="editingAddressId"
      @close="closeAddressDialog"
      @address-saved="refreshAddresses"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { useAddressStore } from '@/stores/address_info';
import SetAddress from '@/components/setaddress/SetAddress.vue';

// 地址弹窗控制
const isAddressDialogVisible = ref(false);
const editingAddressId = ref(null);

// 地址相关状态
const addressStore = useAddressStore();
const showMoreAddresses = ref(false);
const addresses = ref([]);
const defaultAddress = ref(null);

// 计算属性：过滤掉默认地址的其他地址
const filteredAddresses = computed(() => {
  // 如果没有默认地址，返回所有地址
  if (!defaultAddress.value) return addresses.value;

  // 过滤掉默认地址
  return addresses.value.filter(addr => addr.id !== defaultAddress.value.id);
});

// 初始化加载地址
onMounted(() => {
  addressStore.init();
  refreshAddresses();
});

// 刷新地址数据
function refreshAddresses() {
  addresses.value = [...addressStore.addresses];
  defaultAddress.value = addressStore.defaultAddress;
}

// 打开地址弹窗（新增或编辑）
const openAddressDialog = (id = null) => {
  editingAddressId.value = id;
  isAddressDialogVisible.value = true;
};

// 关闭地址弹窗
const closeAddressDialog = () => {
  isAddressDialogVisible.value = false;
  editingAddressId.value = null;
};

// 切换更多地址显示状态
const toggleShowMoreAddresses = () => {
  showMoreAddresses.value = !showMoreAddresses.value;
};

// 设置为默认地址
const setAsDefaultAddress = (id) => {
  addressStore.setDefaultAddress(id);
  refreshAddresses();
};

// 监听地址数据变化
watch(() => addressStore.addresses, () => {
  refreshAddresses();
});
</script>

<style scoped lang="scss">
.send-settings {
  height: auto;
  margin: 0 111.4px;

  .user-info {
    margin: 8px;
    height: auto;
    border: 1px solid #e0e0e0;

    .user-content {
      height: auto;
      border: 1px solid #e0e0e0;
      padding: 0 20px;

      .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;

        h3 {
          font-weight: 700;
          margin: 0;
        }

        .add-address {
          color: #005ea7;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            color: rgb(246, 46, 19);
          }
        }
      }

      .user-name {
        display: flex;
        flex-direction: column;
        color: #666;
        margin: 10px 0;
        padding: 10px;
        border-radius: 4px;

        &:hover {
          background-color: #f5f5f5;
          cursor: pointer;
        }

        .name {
          margin-bottom: 5px;
          font-weight: 500;
          display: flex;
          justify-content: space-between;
        }

        .edit-btn {
          color: #005ea7;
          font-size: 14px;
          cursor: pointer;
          margin-left: 10px;

          &:hover {
            color: rgb(246, 46, 19);
          }
        }

        .address {
          position: relative;
          line-height: 1.5;
        }

        .default-tag {
          margin-left: 10px;
          color: #fff;
          background-color: #005ea7;
          font-size: 12px;
          padding: 2px 5px;
          border-radius: 3px;
        }

        .no-address {
          color: #999;
          padding: 10px 0;
        }
      }

      .more-address {
        display: flex;
        align-items: center;
        color: #005ea7;
        cursor: pointer;
        margin-bottom: 15px;
        font-size: 14px;

        .iconfont {
          margin-left: 5px;
          font-size: 12px;
        }

      }

      .additional-addresses {
        margin-bottom: 15px;
        border-top: 1px dashed #e0e0e0;
        padding-top: 10px;
      }
    }

    .pay-ways {
      padding: 0 20px;
      margin-top: 15px;

      h3 {
        font-weight: 700;
        margin: 15px 0 10px;
      }

      .pay-content {
        display: flex;
        color: #666;
        margin-bottom: 15px;

        span {
          padding: 8px 15px;
          border: 1px solid #e0e0e0;
          margin-right: 10px;
          cursor: pointer;

          &:hover {
            border-color: #005ea7;
          }
        }
      }
    }
  }
}
</style>
